<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue第一天 数据驱动视图</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 300px;
			background-color: red;
		}
		.box1{
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="app"></div>
	<script src="./node_modules/vue/dist/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		//v-text innerText  == {{}}
		//v-html innerHTML  == 带标签
		//v-if="true"  v-else 连写 v-if如果为false则页面不渲染
		//v-show 不管true false 都会渲染 只是显示隐藏
		//v-bind 绑定内置属性  简写:bind
		//v-on:原生事件名 = '函数名'   简写 @
		//v-for='item in list' for循环
		new Vue({
			el: '#app',
			data(){
				return {
					msg:'<h2>innerText</h2>',
					msg2:'<h2>innerHTML</h2>',
					isShow:true,
					list:[{id:1,name:'java'},{id:2,name:'script'},{id:3,name:'ios'},]
				}
			},
			template:`<div>
						<h2>{{ msg }}</h2>
						<h2 v-text='msg'></h2>
						<h2 v-html='msg2'></h2>
						<h2 v-text='1+1'></h2>
						<h2 v-if='isShow'>显示</h2>
						<h2 v-if='!isShow'>不显示</h2>
						<h2 v-if='Math.random()>0.5'>显示</h2>
						<h2 v-else>不显示</h2>
						<h2 v-show='true'>不隐藏</h2>
						<h2 v-show='false'>隐藏</h2>

						<div class="box" v-bind:class = {box1:isShow} v-on:click='clickHandler'></div>
						<ul>
							<li v-for='(item,index) in list'>
								<span v-for='(value,key) in item'>
									{{key}}----{{value}}
								<span>
							</li>
						</ul>
					</div>`,
			methods:{
				clickHandler(){
					this.isShow = !this.isShow
				}
			}
		});
	</script>
</body>
</html>
